<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>computed计算属性</title>
</head>
<body>
    <h2>computed计算属性</h2>
    <ul>
        <li><p>它使用和data里面的用法一样，{{属性名}}，但是它的值是通过方法计算出来的。</p></li>
        <li><p>computed和methods一样，都是定义全部由方法组成的对象。</p></li>
    </ul>
    <h2>computed和methods的相同点和不同点</h2>
    <h3>相同点</h3>
    <ul>
        <li>都是通过方法得到的结果。</li>
    </ul>
    <h3>不同点</h3>
    <ul>
        <li>计算属性是属性，所以直接通过属性名访问。方法是方法，所以需要使用()调用</li>
        <li>methods方法每次都回去调用，computed中的计算属性有缓存，只要依赖的数据不改变，从第二次调用开始就用的缓存数据</li>
    </ul>
    <main id="app">
        <p>姓名：{{name}}</p>
        <p>年龄：{{age}}</p>
        <input type="text" v-model="name">
        <h2>方法</h2>
        <p>{{say_method()}}</p>
        <p>{{say_method()}}</p>
        <h2>计算属性</h2>
        <p>{{say_computed}}</p>
        <p>{{say_computed}}</p>
    </main>
</body>
<script src="../vue.js"></script>
<script>
    let vue = new Vue({
        el: "#app",
        data: {
            name: "Hydra",
            age: 35,
            message: "Hello"
        },
        methods: {
            say_method() {
                console.log("方法调用")
                return this.name + "说：“" + this.message + "”";
            }
        },
        computed: {
            say_computed() {
                console.log("计算属性调用")
                return this.name + "说：“" + this.message + "”";
            }
        }
    });
</script>
</html>